ブラウザの位置とウィンドウサイズを調整する
今回は、ブラウザのウィンドウサイズを最適なサイズに変更し、同時に画面の中央にブラウザを移動させるボタンを作成します。凝ったデザインのホームページを『最適なウィンドウサイズで見てもらいたい!』という場合に活用するとよいでしょう。

→ 位置とサイズを変更するボタンを作成する
 
まずは、ウィンドウの移動とサイズ変更を行うボタンを作成します。これはBUTTONタグで作成し、onClickイベントで「rsize()」という自作JavaScript関数を呼び出してやるだけでOKです。
<BUTTON onClick="rsize()">最適なウィンドウサイズに変更!</BUTTON>


→ ウィンドウサイズの変更
 
続いて、JavaScript関数「rsize()」を自作します。ウィンドウサイズの変更は、「window.resizeTo(横幅,高さ)」で実現できます。横幅、高さには最適な値をピクセル数で指定しますが、ここでの指定はページの表示領域の大きさではなく、[戻る][進む]といったボタンやスクロールバーなど、ウィンドウ全体のサイズとなる点に注意してください。このため、実際には最適なサイズよりも少し大きめの値を指定しておく必要があります。
<SCRIPT language="JavaScript">
<!--
function rsize(){
window.resizeTo(600,700);
}
// -->
</SCRIPT>


→ ウィンドウ位置の指定
 
JavaScript関数「rsize()」では、ウィンドウを画面の中心に表示させる処理も行います。訪問者の画面全体のサイズ(横幅)は「screen.width」で取得できるため、ブラウザの横幅(先ほど「window.resizeTo」で指定した横幅)を「screen.width」から引くと、画面の左右の余白を算出できます。この余白を2で割った位置からブラウザの表示を開始すれば、ブラウザを画面の左右中央に表示できます。ブラウザの表示位置は「window.moveTo(横位置,縦位置)」で指定できるため、以下のようにJavaScriptを記述すれば、ブラウザを画面の中央に移動できます。なお、縦位置は画面の最上部「0」を指定しています。
<SCRIPT language="JavaScript">
<!--
function rsize(){
window.resizeTo(600,700);
x=(screen.width-600)/2
window.moveTo(x,0);
}
// -->
</SCRIPT>


G|Cg|C@Amazon Yahoo yV

z[y[W yVoC[UNLIMIT1~] COiq COsI